<template>
<a-drawer
    :width="spaceWidth"
    :mask-closable="true"
    :visible="visible"
    unmount-on-close
    :ok-loading="loading"
    ok-text="保存"
    @ok="handleOk"
    @cancel="handleCancel">
  <template #title>
    {{ title }}管理
  </template>

    <a-card>
      <a-carousel
          :auto-play="true"
          style="width: 600px; height: 240px; margin: auto">
        <a-carousel-item v-for="item in items.filter(item => item.enabled && item.url)" :key="item.id">
          <img :src="item.url" style="width: 100%"/>
        </a-carousel-item>
      </a-carousel>
    </a-card>

  <a-row style="margin-bottom: 16px; margin-top: 16px">
    <a-col :span="16">
      <a-space>
        <a-button type="primary" @click="doAddition">
          <template #icon>
            <icon-plus />
          </template>
          添加
        </a-button>
      </a-space>
    </a-col>
  </a-row>

  <a-table
      :columns="columns"
      :data="items"
      row-key="id"
      stripe
      :loading="loading"
      :draggable="{ type: 'handle', width: 40 }"
      :pagination="false"
      @change="handleChange"
  >
    <template #slogan="{ record }">
      <a-input v-model="record.slogan" />
    </template>
    <template #url="{ record }">
      <e-upload-image v-model:url="record.url" :width="400" :height="200" :show-file-list="false"/>
    </template>
    <template #bgColor="{ record }">
        <color-picker v-model:color="record.bgColor"/>
    </template>
    <template #path="{ record }">
      <a-input v-model="record.path" type="text" />
    </template>
    <template #enabled="{ record }">
      <a-switch
        v-model="record.enabled"
        type="round"
        unchecked-color="#F53F3F"
        :checked-value="true"
        :unchecked-value="false"
        unchecked-text="禁用">
        <template #checked>
          启用
        </template>
        <template #unchecked>
          禁用
        </template>
      </a-switch>
    </template>
    <template #operation="{ record, rowIndex }">
      <a-popconfirm :content="'确定删除吗?'" type="warning" @ok="doRemove(rowIndex)">
        <a-button type="text" size="small" status="danger">
          删除
        </a-button>
      </a-popconfirm>
    </template>
  </a-table>

</a-drawer>
</template>

<script>
import useLoading from "@/hooks/loading";
import { reactive, ref, toRaw } from "vue";
import { useAppStore } from "@/store";
import { list, saveBatch } from "@/api/modules/marketing/carousel-item";
import ColorPicker from "@/components/color-picker.vue";

const { loading, setLoading } = useLoading()
const appStore = useAppStore();

const columns = ref([
  {
    title: '标语',
    dataIndex: 'slogan',
    slotName: 'slogan',
    width: 200
  }, {
    title: '图片',
    dataIndex: 'url',
    slotName: 'url'
  }, {
    title: '背景色',
    dataIndex: 'bgColor',
    slotName: 'bgColor',
    width: 100
  }, {
    title: '页面跳转',
    dataIndex: 'path',
    slotName: 'path',
    width: 200
  }, {
    title: '启用',
    dataIndex: 'enabled',
    slotName: 'enabled',
    width: 100
  }, {
    title: "操作",
    align: "right",
    fixed: "right",
    slotName: 'operation',
    width: 70
  }
])
const items = reactive([])

export default {
  name: 'CarouselSetting',
  components: { ColorPicker },
  emits: ['cancel', 'ok'],
  data() {
    return {
      id: '',
      title: '',
      visible: false,
      loading,
      columns,
      items
    }
  },
  computed: {
    menuWidth() {
      return appStore.menuCollapse ? 48 : appStore.menuWidth
    },
    spaceWidth() {
      return window.innerWidth - this.menuWidth - 2
    }
  },
  methods: {
    async open(id, title) {
      this.id = id
      this.title = title
      const { data } = await list(id)
      this.items = data
      this.visible = true
    },
    close() {
      this.visible = false
      this.id = ''
      this.title = ''
      this.items = []
    },
    doAddition() {
      this.items.push({
        slogan: '',
        url: '',
        bgColor: '',
        path: '',
        enabled: true
      })
    },
    doRemove(index) {
      this.items.splice(index, 1)
    },
    handleChange(e) {
      e.map(item => toRaw(item)).forEach((item, index) => {
        this.items[index] = item
      })
    },
    async handleOk() {
      try {
        setLoading(true)
        await saveBatch(this.id, this.items)
        this.close()
        this.$emit('ok')
      } finally {
        setLoading(false)
      }
    },
    handleCancel() {
      this.close()
      this.$emit('cancel')
    }
  }
}
</script>

<style scoped lang="less">

</style>
